<template>
  <view class="account">
    <view class="content">
      <view class="header">
        <image class="avatar" src="../../static/driver.png" />
        <view class="address">{{ place }}</view>
        <view class="amount">{{ aData.settleAmt }}</view>
      </view>
      <view class="list">
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="item-title">{{ item.title }}</view>
          <view class="item-desc">{{ item.desc }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      place: '',
      aData: {},
      list: [
        { title: '订单描述', desc: '澳大利亚铁矿石-黑珍珠', key: 'cargoName' },
        { title: '货主', desc: '刀哥', key: 'shipperName' },
        { title: '公司名称', desc: '陕A12345', key: 'corpName' },
        { title: '订单金额', desc: '5900.00', key: 'freightTotalPrice' },
        { title: '亏损扣除', desc: '90.00', key: 'deductAmt' },
        { title: '扣减重量(吨)', desc: '90.00', key: 'deductWeight' },
        { title: '手续费', desc: '', key: 'handleAmt' },
        { title: '实付金额', desc: '5800.00', key: 'settleAmt' },
        { title: '交易时间', desc: '2023-5-18 10:30', key: 'settleAt' },
        // { title: '交易单号', desc: 'LSDH01238981', key: '' },
        { title: '运输单号', desc: 'YSDH202306081030', key: 'dispatchCode' },
      ],
    }
  },
  onLoad() {
    this.aData = uni.getStorageSync('freightData')
    this.place = `${this.aData.loadPlaceSplit.city}${this.aData.loadPlaceSplit.county}-${this.aData.targetPlaceSplit.city}${this.aData.targetPlaceSplit.county}`
    this.list.forEach((item) => {
      for (const key in this.aData) {
        if (Object.hasOwnProperty.call(this.aData, key)) {
          if (item.key == key) {
            item.desc =
              this.aData[key] || this.aData[key] == 0 ? this.aData[key] : ''
          }
        }
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.account {
  height: 100vh;
  width: 100%;
  background: #f6f6f6;
  box-sizing: border-box;
  padding: 24rpx 30rpx 0;
}
.content {
  width: 100%;
  background: #ffffff;
  border-radius: 10rpx;
  padding: 24rpx 20rpx;
}
.item {
  display: flex;
  align-items: center;
  &-title {
    width: 96rpx;
    font-size: 24rpx;
    color: #949699;
    line-height: 48rpx;
    margin-right: 32rpx;
  }
  &-desc {
    font-size: 24rpx;
    color: #333333;
    line-height: 48rpx;
  }
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 56rpx;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 23rpx;
  .avatar {
    width: 119rpx;
    height: 120rpx;
    margin-bottom: 20rpx;
  }
  .address {
    font-size: 28rpx;
    font-weight: 500;
    color: #000000;
    line-height: 40rpx;
    margin-bottom: 17rpx;
  }
  .amount {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 45rpx;
  }
}
</style>
